<template>
  <el-row :gutter="20" class="row">
    <el-col :span="24">
      <!-- 使用直角卡片来展示网站简介 -->
      <h3 class="website-title">友友学社简介</h3>
      <blockquote class="website-description">
        一个板块化的学习类社群，主打学习，成长，社交，娱乐等领域，提倡平等，友爱，互助，在圈子内收获友情并获得成长。
      </blockquote>
      <div class="team-info">
        <strong>论坛开发团队：</strong>
        <el-tag type="success" size="small">友友学社研发组</el-tag>
      </div>
      <div class="founder-info">
        <strong>论坛创始人：</strong>
        <el-tag type="info" size="small">赵文博</el-tag>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'WebsiteIntroduction'
}
</script>

<style scoped>
.intro-card {
  padding: 20px;
  border-radius: 5px; /* 直角样式 */
  background-color: white;
}

.website-title {
  font-size: 18px; /* 标题调小 */
  font-weight: bold;
  color: #ff8c00; /* 橙色标题 */
  margin-bottom: 10px;
}

.website-description {
  font-size: 14px; /* 正文调小 */
  color: #555;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #ff8c00; /* 左侧引用框样式 */
}

.team-info,
.founder-info {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  text-align: left; /* 左对齐 */
}

.el-tag {
  margin-left: 5px; /* Tag 与文字的间距 */
}
</style>
